.clouds {
  position: relative;
  z-index: 1;
}

[data-theme='dark'] .clouds {
  opacity: 0.25;
}

.cloudAnimation {
  position: relative;
}

.upperCloud {
  position: absolute;
  top: 10vh;
  left: -3vw;
}

.upperCloudAnimation {
  animation: 45s flowClouds infinite linear;
}

.rightCloud {
  position: absolute;
  top: 30vh;
  left: 35vw;
}

.rightCloudAnimation {
  animation: 75s flowClouds infinite linear;
}

.lowerCloud {
  position: absolute;
  top: 45vh;
  left: 5vw;
}

.lowerCloudAnimation {
  animation: 60s flowClouds infinite linear;
}

@keyframes flowClouds {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-150%, 0);
    opacity: 1;
  }

  50.001% {
    opacity: 0;
    transform: translate(100%, 0);
  }

  50.002% {
    opacity: 1;
  }

  100% {
    transform: translate(0, 0);
  }
}
